<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <title>万果园水果商城</title>
    <meta name="keywords" content="小吃,美食,零食,源辰"/>
    <meta name="description" content="各种小吃美食，应有尽有"/>
    <link href="file/images/dianming.png" rel="shortcut icon" type="image/x-icon"/>
    <link href="file/css/header.css" rel="stylesheet" type="text/css"/>
    <link href="file/css/index.css" rel="stylesheet" type="text/css"/>
    <link href="file/css/footer.css" rel="stylesheet" type="text/css"/>

</head>

<body>
<!-- 顶部区域 -->
<header id="header">
    <!-- 顶部标题区域 -->
    <div class="htitle">
        <a href="#" target="_blank" class="location">广州</a>

        <div class="header-info">
            <div class="login-info" id="login_info">

            </div>
            <div class="person-info">
                <span>|</span>
                <a href="user/order.html" >我的订单</a>
                <span>|</span>
                <a href="user/perInfo.html" >个人信息</a><span>|</span>
                <a onclick="exitLogin()" style="cursor: pointer">退出登录</a>
            </div>
        </div>
    </div>

    <!-- 顶部搜索区域 -->
    <div class="search">
        <div class="search_left">
            <a href="index.html" title="首页">
                <img src="file/images/dianmin.png" width="260px" height="120px"/>
            </a>
        </div>

        <div class="search_right">
            <div class="search_top">
<!--                <div class="search_div">-->
<!--                    <input type="search" class="search-ipt" placeholder="请输入要搜索的内容" id="search_content"/>-->
<!--                    <input type="button" class="search-btn" onclick="searchGoods()"/>-->
                    <!--搜索框-->
<!--                    </div>-->
                <div class="col-lg-8">
                    <div class="input-group input-group-lg">
                        <input type="text" id="inputSearch" class="form-control" placeholder="请输入内容...">

                        <span class="input-group-btn">
                            <button onclick="to_page(1)" class="btn btn-default"  type="button">搜索</button>
                        </span>
                    </div>
                </div>
                <div class="buycart">
                    <i class="iconfont" id="iconfont">0</i>
                    <a href="/user/gwc.html">我的购物车</a>
                </div>
            </div>

<!--            <div class="search_item" id="search_item">-->
            <div id="btnGroup" class="btn-group btn-group-justified" role="group" aria-label="...">
<!--                <div class="btn-group" role="group">-->
<!--                    <button type="button" class="btn btn-default">a </button>-->
<!--                </div>-->
<!--            </div>-->
            </div>
        </div>
    </div>
</header>

<div class="slide">
    <ul class="slide_pics">
        <li><a href="" class=""><img src="file/images/slide01.jpg" alt="幻灯片"></a></li>
        <li><a href="" class=""><img src="file/images/slide02.jpg" alt="幻灯片"></a></li>
        <li><a href="" class=""><img src="file/images/slide03.jpg" alt="幻灯片"></a></li>
        <li><a href="" class=""><img src="file/images/slide04.jpg" alt="幻灯片"></a></li>
        <li><a href="" class=""><img src="file/images/slide05.jpg" alt="幻灯片"></a></li>
    </ul>
    <div class="prev" style="cursor: pointer"></div>
    <div class="next" style="cursor: pointer"></div>
    <ul class="points" ></ul>
</div>


<article>
    <div class="view_title" id="view_title">
<!--        <a href="" class="view_price price_down">价格搜索</a>-->
        <div id="priceDiv">
            <input type="number" id="start_price" class="price_ipt" min="0" />
            <span>   -   </span>
            <input type="number" id="end_price" class="price_ipt" min="0" />
            <icon id="iconMoney" class="glyphicon glyphicon-yen"> </icon>
            <button id="moneySearch" onclick="searchPrice()" type="button" class="btn btn-danger">搜索</button>
        </div>
    </div>

    <div class="view_goods">
        <ul id="view_goods">

        </ul>
    </div>

    <!--分页-->
    <div class="row">
        <div class="col-md-6" id="page_nav" style="text-align: center;margin: 0 auto;">
            <!--        分页条-->
        </div>
    </div>

</article>
<div class="popup_con">
    <div class="popup">
        <p id="popup_info"></p>
    </div>
</div>
<footer>
    <div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2021 <a class="copy" href="#" target="_blank">万果园商城</a> All Rights Reserverd</p>
    <p>电话：0000-0000</p>
</footer>

<script src="file/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="file/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="file/js/slide.js" type="text/javascript"></script>
<!-- 欢迎您功能  -->
<script>

    $(function () {
        ifLogin();

        GoodsType();
        // showAll();
        to_page(1);
    })

    //网页一加载 就要判断用户是否登录
    function ifLogin(){
        //开始发送请求 验证用户是否登录
        $.ajax({
            url: "/ifLogined",
            type: "GET",
            success: function (data) {
                console.log(data);
                let str = '';
                if (data.code == 200) {
                    str += '<a href="loginPage.html" title="您好！请登录">您好！请登录</a>';
                    str += '<a href="reg.html" title="免费注册">免费注册</a>';
                } else {
                    str += '<a href="user/perInfo.html"> 【' + data.memberinfo.nickname + '】</a>';
                }

                //放入进去上面空的地方
                $("#login_info").html(str);
                gwcNum();
            }
        })
    }

    function gwcNum() {
        //购物车数目
        $.ajax({
            url: "/countGoodsNum",
            type: "GET",
            success: function (num) {
                console.log(num);
                //放入进去上面空的地方
                $("#iconfont").html(num);
            }
        })
    }

    function GoodsType() {
        //目录
        $.ajax({
            url: "/goodsType",
            type: "GET",
            success: function (data) {
        let str = ` <div class="btn-group" role="group">
                        <button onclick="to_page(1,-1)" type="button" class="btn btn-success">全部</button>
                    </div>`;

                for (let i = 0; i < data.length; i++) {
                    str +=
                `<div class="btn-group" role="group">
                    <button onclick="to_page(1,${data[i].tno})" type="button" class="btn btn-warning">${data[i].tname}</button>
                 </div>`;
                }

                $("#btnGroup").html(str);
            }
        })
    }

    function showAll(data) {
        //展示
        let str = '';
        for (let i = 0; i < data.length; i++) {
            str += `<li class="hot_box">
                        <i class="all_i i_t"></i>
                        <i class="all_i i_r"></i>
                        <i class="all_i i_b"></i>
                        <i class="all_i i_l"></i>
                        <a href="detail.html#${data[i].gno}"  class="hot_warp">
                            <img src="file/images/goods/${data[i].pic}" title="${data[i].intro}"/>
                            <span>${data[i].gname}</span>
                        </a>
                        <div class="view_info">
                            <span class="price">${data[i].price}</span>
                            <span>/ ${data[i].unit}</span>
                            <span class="buy">&nbsp;</span>
                        </div>
                    </li>`;
        }
        $("#view_goods").html(str);
    }
    
    function to_page(pageNum,tno,sp,ep) {
        //分页
        var inputs = $("#inputSearch").val();

        if(inputs==''){inputs = -1;}   //传''的话url会有问题
        if(tno==null){tno = -1;}
        //发送请求 搜索商品
        $.ajax({
            url: "/AllGoods",
            // data: "pageNum="+pageNum,     //发送到服务器的数据
            data: {pageNum: pageNum,tno: tno,inputs: inputs,sp: sp,ep: ep},
            type: "GET",
            success: function (result) {
                console.log(result);
                //展示页面
                showAll(result.list);
                //展示分页条
                build_page_nav(result,tno);
            }
        })
    }

    function build_page_nav(result,tno) {
        //先清空
        $("#page_nav").empty();
        var ul = $("<ul></ul>").addClass("pagination pagination-lg");
        var fistPageLi = $("<li></li>").append($("<a></a>").append("首页"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
        if(result.hasPreviousPage == false){
            fistPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{      //有前一页
            fistPageLi.click(function (){
                to_page(1,tno);
            });
            prePageLi.click(function (){
                to_page(result.prePage,tno);
            });
        }

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页"));
        if(result.hasNextPage == false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            nextPageLi.click(function (){
                to_page(result.nextPage,tno);
            });
            lastPageLi.click(function (){
                to_page(result.pages,tno);
            });
        }

        ul.append(fistPageLi).append(prePageLi);

        $.each(result.navigatepageNums,
            function (index,item){
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                if(result.pageNum == item){
                    numLi.addClass("active");
                }
                numLi.click(function (){
                    to_page(item,tno);
                });
                ul.append(numLi);
            });

        ul.append(nextPageLi).append(lastPageLi);

        var navEle = $("<nav></nav>").append(ul)

        navEle.appendTo("#page_nav")
    }

    // //只处理发送内容 不处理接收
    // function searchGoods() {
    //     var inputs = $("#inputSearch").val();
    //     console.log(inputs);
    //     $.ajax({
    //         url: "http://localhost:8080/AllGoods",
    //         data:"inputs="+inputs,        //发送到服务器的数据
    //         type: "GET",
    //         success: function () {
    //             //转给to_page去重新获取数据
    //             // to_page(1);
    //         }
    //     })

    // }
    function searchPrice() {

        var start_price = $("#start_price").val();
        var end_price = $("#end_price").val();
        if(start_price>end_price){
            alert("请输入正确的价格区间");
            return;
        }
        to_page(1,-1,start_price,end_price)
    }
    function exitLogin() {
        $.ajax({
            url: "/exitLogin" ,
            type: "GET",
            success: function () {
                location.href="index.html";
            }
        })
    };

</script>
</body>
</html>